<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: chen_yt
 * @Date: 2022-08-10 10:55:21
 * @LastEditors: chen_yt
 * @LastEditTime: 2022-08-10 11:26:56
-->

<template>
  <fks-dialog
    :append-to-body="true"
    :visible.sync="Visible"
    width="960px"
    @close="close"
  >
    <div slot="title">
      <i class="fks-icon-edit" />
      {{ LANG.DEFAULT_CLIENT }}
    </div>
    <fks-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="120px"
      v-loading="loading"
    >
      <fks-form-item
        :span="12"
        lead
        :label="LANG.CLIENT_NAME"
        prop="clientName"
      >
        <fks-input v-model="form.clientName" maxlength="50" show-word-limit />
      </fks-form-item>
      <fks-form-item
        :span="12"
        :label="LANG.REDIRECT_URL"
        prop="webServerRedirectUri"
      >
        <span slot="label">
          <span>{{ LANG.REDIRECT_URL }}</span>
          <fks-tooltip>
            <div slot="content" class="tips-container">
              {{ LANG.REDIRECT_URL_TIP }}
            </div>
            <i class="fks-icon-question" />
          </fks-tooltip>
        </span>
        <fks-input
          v-model="form.webServerRedirectUri"
          maxlength="255"
          show-word-limit
        />
      </fks-form-item>
      <fks-form-item :span="12" lead :label="LANG.CLIENT_ID" prop="clientId">
        <fks-input v-model="form.clientId" maxlength="50" show-word-limit />
      </fks-form-item>
      <fks-form-item :span="12" :label="LANG.CLIENT_SECRET" prop="clientSecret">
        <fks-input
          v-model="form.clientSecret"
          maxlength="255"
          show-word-limit
        />
      </fks-form-item>
    </fks-form>
    <template slot="footer">
      <fks-button
        type="primary"
        icon-class="submit"
        :loading="submitLoading"
        icon="fks-icon-check"
        @click="submit"
      >
        {{ LANG.SAVE }}
      </fks-button>
    </template>
  </fks-dialog>
</template>
<script>
import { getClient } from './api'
import { saveClient } from '../api'
export default {
  name: 'DefaultClient',
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    tenantIdInDataBase: {
      type: String,
      default: ''
    },
    clientIdInDataBase: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'edit'
    }
  },
  data() {
    return {
      Visible: false,
      loading: false,
      submitLoading: false,
      originClient: {},
      form: {}
    }
  },
  computed: {
    //验证规则
    rules() {
      return {
        clientName: [
          {
            required: true,
            message: this.LANG.CLIENT_NAME_NOT_EMPTY,
            trigger: 'change'
          }
        ],
        clientId: [
          {
            required: true,
            message: this.LANG.CLIENT_ID_RULE,
            trigger: 'change'
          }
        ],
        clientSecret: [
          {
            required: true,
            message: this.LANG.CLIENT_SECRET_NOT_EMPTY,
            trigger: 'change'
          }
        ],
        webServerRedirectUri: [
          {
            required: false,
            message: this.LANG.REDIRECT_URL_NOT_EMPTY,
            trigger: 'change'
          },
          {
            pattern: /^(https?):\/\/([\w-]+(\.[\w-]+)*\/?)+(([\w\-\.,@?^=%&:\/~\+#]*)+)?$/,
            message: this.LANG.REDIRECT_URL_PATTERN
          }
        ]
      }
    }
  },
  watch: {
    visible(val) {
      this.Visible = val
      if (val) {
        this.clearData()
        this.getClient()
      }
    },
    originClient(val) {
      if (!val.id) {
        return
      }
      let { clientName, clientId, clientSecret, webServerRedirectUri } = val

      this.form = { clientName, clientId, clientSecret, webServerRedirectUri }
    }
  },
  methods: {
    getClient() {
      this.loading = true
      getClient(this.clientIdInDataBase)
        .then((res) => {
          if (res.status) {
            this.originClient = res.data
          }
        })
        .catch(() => {})
        .finally(() => {
          this.loading = false
        })
    },

    updateClient() {
      this.submitLoading = true
      let data = { id: this.clientIdInDataBase, ...this.form }
      saveClient(data)
        .then((res) => {
          if (res.status) {
            this.$emit('onSave')
            this.close()
          }
        })
        .catch(() => {})
        .finally(() => {
          this.submitLoading = false
        })
    },

    submit() {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return
        }
        this.updateClient()
      })
    },

    clearData() {
      this.submitLoading = false
      this.loading = false
      this.originClient = {}
      this.form = {}
      try {
        this.$refs.form.resetFields()
      } catch {}
    },

    close() {
      this.clearData()
      this.$emit('update:visible', false)
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .fks-dialog__body {
  padding-bottom: 0;
}

.tips-container {
  font-size: 14px;
  line-height: 20px;
}
</style>